<template>
    <!-- 右边的内容 -->
    <div class="content_rigth">
     <div class="content_rigth_top">
         <div class="content_rigth_top_p" v-if="routeNum==='1'">
             <span :class="isActive===1?'active':''"  @click="isActive=1">资源</span>
             <span :class="isActive===2?'active':''" @click="isActive=2">视频课</span>
             <span :class="isActive===3?'active':''" @click="isActive=3">直播课</span>
         </div>
         <div class="content_rigth_top_p" v-else-if="routeNum==='3'">
             <span :class="isActive===1?'active':''"  @click="isActive=1">资源</span>
             <span :class="isActive===2?'active':''" @click="isActive=2">视频课</span>
             <span :class="isActive===3?'active':''" @click="isActive=3">线下课</span>
             <span :class="isActive===4?'active':''" @click="isActive=4">直播课</span>
         </div>
         <div class="content_rigth_top_p" v-else-if="routeNum==='4'">
             <span :class="isActive===1?'active':''"  @click="isActive=1">浏览记录</span>
         </div>

     </div>
     <div class="content_rigth_button">
        <div :style="{padding:'18px 0'}">
            <el-input
            v-model="inputVlaue"
            :input-style="{width:'200px'}"
            size="large"
            :prefix-icon="Search"
            />
        <el-button :style="{margin:'1px 60px' , width:'60px',color: '#7d8090'}"  color="#f5f7f9"  size="large">搜索</el-button>
        </div> 
            <div>
                <div class="table_paging"  v-for="item in historyList" :key="item.id" v-if="routeNum==='4'">
                    <div class="content-container_left">
                        <img :src="item.momentBackup.cover[0]" :style="{width:'170px',height:'100px',borderRadius:'4px'}">
                        <div :style="{marginLeft:'30px'}"> 
                            <p class="content-container_left_name">{{item.momentTitle}}</p>
                            <p class="content-container_left_over">教程</p>
                            <div class="content-container_left_over_but">
                                <img :src="item.momentBackup.creatorBackup.avatar" 
                                    class="content-container_left_over_img">
                                <p >雯思启舞</p>
                            </div>
                        </div>
                    </div>  
                    <div class="content-container_rigth">
                        <div class="content-container_rigth_flex">
                            <p v-if="Math.floor((Date.now()-item.updateTime)/1000/60/60)===0">{{Math.floor((Date.now()-item.updateTime)/1000/60)}}分钟前</p>
                            <p v-else>{{Math.floor((Date.now()-item.updateTime)/1000/60/60)}}小时前</p>
                            <a class="content-container_rigth_p">删除</a>
                        </div>
                    </div>
                </div>
            </div>
         <span></span>
     </div>
 </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
name: "Navigation",
});
</script>

<script setup lang="ts">
import type {historydataType,historydataItemsType} from "@/api/Studio"
import {getHistoryList}from "@/api/Studio"
import {ref,onMounted, nextTick, watch} from "vue"
import {useRoute } from "vue-router";
import {Search} from "@element-plus/icons-vue"
const route = useRoute()
const isActive =ref(1)
const inputVlaue = ref('')
const routeNum = ref<any>('1')

const historyList = ref<historydataItemsType>()
onMounted(() => {
    getHistory()
})
//获得历史数据请求
const getHistory = async ()=>{
    const result = await getHistoryList()
    historyList.value = result.content
    console.log(historyList.value);
}
watch(route,()=>{
       //初始接受路由传参数据
    routeNum.value = route.query.num
    console.log(routeNum.value)

})
</script>

<style lang="scss" scoped>
.content_rigth{
width: 1020px;
margin-left: 10px;
.content_rigth_top{
 height: 96px;
 display: flex;
 border-radius: 3px;
 background-color: #ffffff;
 .content_rigth_top_p{
     padding-top: 45px;
     margin-left: 20px;
     color: #7d8090;
 }
 .content_rigth_top_p span{
     padding: 9px 12px;
     font-size: 14px;
     margin:10px
 }
}
.content_rigth_button{
    padding:0  30px 10px 30px ;
 width: 960px;
 min-height: 600px;
 margin-top: 10px;
 background-color: #ffffff;
}
}
.active{
 border-bottom:4px #f93684 solid;
}
.table_paging{
        display: flex;
        justify-content: space-between;
        padding: 20px 0;
        border-bottom: #e3e3e3 1px solid;
        .content-container_left{
            display: flex;
            .content-container_left_name{
                font-size: 16px;
                color: #111;
            }
            .content-container_left_over{
                margin-top: 25px ;
                font-size: 14px;
                color: #7d8090;
                
            }
            .content-container_left_over_but{
                display: flex;

                    .content-container_left_over_img{
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    margin-top: 18px;
                }
                p{
                    margin: 24px 0 0 10px;
                    font-size: 16px;
                    color: #111;
                }
            }

        }
        .content-container_rigth{


            height: 48px;
            text-align: center;
            margin-top: 20px;
                .content-container_rigth_flex{
                    display: flex;
                    .content-container_rigth_p{
                    display: block;
                    margin-top: 9px;
                    font-size: 14px;
                    color: #7d8090;
                }

            }
            .content-container_rigth_flex p{
                margin: 10px 100px 0 0;
                color: rgb(17, 17, 17);
                font-size: 14px;
            }

        }
    }
</style>